<!DOCTYPE html>
<html>
<head>
<title>OSC chat room</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
	font-family: '微软雅黑';
}

#main {
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
}

#containter {
	top: 42px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
}

#containter div {
	position: relative;
}

#right {
	border-left: 1px solid #dddddd;
	height: 100%;
}

#left {
	border-right: 1px solid #dddddd;
	height: 100%;
}

#login-form {
	float: right;
}

#maindiv {
	display: table;
	position: relative;
	height: 100%;
	border-collapse: collapse;
}

#msgdiv {
	width: 100%;
	display: table-row;
	font-size: 12px;
	font-family: '微软雅黑';
}

#msgdiv div{
	display: none;
}

#msgdiv div.activeRoom{
	display: block;
}

#msgdiv div {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#msgdiv div p {
	margin-left: 8px;
	margin-bottom: 5px;
}

#msgdiv div p span {
	font-weight: bold;
}

.sys-info {
	color: #FF6600;
}

#sentdiv {
	border-top: 1px solid #dddddd;
	width: 100%;
	height: 100px;
	display: table-row;
	bottom: 0px;
}

::-webkit-scrollbar {
	width: 9px;
	height: 8px;
	background-color: #CAC9C8;
}

::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-track:hover {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
	background-color: #fefefe;
}

::-webkit-scrollbar-track:active {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
	background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-thumb:active {
	background: rgba(0, 0, 0, 0.6)
}
</style>
</head>
<body>
	<div class="main" id="main">
		<div class="navbar .navbar-inverse">
			<div class="navbar-inner">
				<a class="brand" href="#">Osc chat room</a>
				<ul class="nav">
				</ul>
				<form id="login-form" class="navbar-form pull-left form-horizontal">
					帐号： <input id="uid" type="text" class="span2"
						placeholder="UID">
					昵称： <input id="username" type="text" class="span2"
						placeholder="Username">
					<button type="button" class="btn" id="lgn-btn">登录</button>
				</form>
			</div>
		</div>
		<div id="containter" class="row-fluid">
			<div class="span2" id="left">
				<ul class="nav nav-list" id="rooms">
					<li id="ROOM-0" class="active"><a href="#">OSC 大厅</a></li>
					<li id="ROOM-1"><a href="#">Java讨论</a></li>
				</ul>
			</div>
			<div class="span8" id="maindiv">
				<div id="msgdiv">
					<div id="messages" class="activeRoom"></div>
					<div id="messages-ROOM-1"></div>
				</div>
				<div id="sentdiv">
					<div class="input-append" style="width: 80%">
						<input class="span" id="send-msg" type="text" onkeydown="javascript:if(window.event.keyCode==13){$('#send-msg-btn').click();}">
						<button class="btn" id="send-msg-btn" type="button">Send!</button>
					</div>
				</div>
			</div>
			<div class="span2" id="right">
				<ul class="nav nav-list" id="online-user">
					<li class="active"><a href="#">在线用户</a></li>
				</ul>
			</div>
		</div>
	</div>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/oschart.js"></script>

	<script type="text/javascript"> 
		var ws = null; 

		if(!(('WebSocket' in window)||('MozWebSocket' in window))){
			alert('请使用Firefox 4+、Chrome 4+、Opera 10.70+以及Safari 5+等支持WebSocket的浏览器！'); 
		}

		function startServer() {
			// 设定WebSocket,注意协议是ws，请求是指向对应的WebSocketServlet的
			var uid = document.getElementById('uid').value;
			var name = document.getElementById('username').value;
			var url = "ws://localhost:8080/main.ws?uid="+uid;
			// 创建WebSocket实例，下面那个MozWebSocket是Firefox的实现
			if ('WebSocket' in window) { 
				ws = new WebSocket(url);
			} else if ('MozWebSocket' in window) { 
				ws = new MozWebSocket(url); 
			} else { 
				alert('请使用Firefox 4+、Chrome 4+、Opera 10.70+以及Safari 5+等支持WebSocket的浏览器！'); 
				return; 
			}

			// WebSocket握手完成，连接成功的回调
			// 有个疑问，按理说new WebSocket的时候就会开始连接了，如果在设置onopen以前连接成功，是否还会触发这个回调
			ws.onopen = function() { 
				$('#login-form').hide();
	        };

	        // 收到服务器发送的文本消息, event.data表示文本内容
			ws.onmessage = function(event) { 
				console.log(event.data);
				var msg = eval('(' + event.data + ')');
				if(msg.kind=="EVENT"){
					var event = msg.result;
					if(event.event=="LOGIN"){
						$('#online-user').append('<li id="u-'+event.u.id+'"><a href="#">'+event.u.name+'</a></li>');
						$('.activeRoom').append('<p><span class="sys-info"> '+event.u.name+' </span> 进入了聊天室...</p>');
						$('.activeRoom')[0].scrollTop=$('.activeRoom')[0].scrollHeight;
					}else if(event.event=="CLOSE"){
						$('#u-'+event.u.id).remove();
						$('.activeRoom').append('<p><span class="sys-info"> '+event.u.name+' </span> 离开了聊天室...</p>');
						$('.activeRoom')[0].scrollTop=$('.activeRoom')[0].scrollHeight;
					}else if(event.event=="REFRESH_ONLINE_USERS"){
						$('#online-user').append('<li id="u-'+event.u.id+'"><a href="#">'+event.u.name+'</a></li>');
					}
				}else if(msg.kind=="LETTER"){
					var letter = msg.result;
					$('#messages').append('<p><span> '+letter.form.name+' :</span> '+letter.msg+'</p>');
					$('#messages')[0].scrollTop = $('#messages')[0].scrollHeight;
				}
			};

			// 关闭WebSocket的回调
			ws.onclose = function() {
			};
		}

		function sendMyMessage(textMessage) {
			if(ws == null){
				alert('请输入一个昵称，然后点击登录！');
			}
			if(ws != null && textMessage != '') {
				// 通过WebSocket想向服务器发送一个文本信息
				ws.send(textMessage);
			}
		}

		$(function(){
			$('#lgn-btn').click(function(){
				startServer();
			});
			$('#send-msg-btn').click(function(){
				var msg = $('#send-msg').val();
				if(msg!=null && msg!=''){
					var json = '{"t":0,"id":"0","m":"'+msg+'"}';
					sendMyMessage(json);
					$('#send-msg').val('');
				}
			});
		});
		</script>
</body>
</html>